<template>
  <view class="setbody">
    <view class="content">
      <view class="top_content">
        <view class="header">
          <image
            :src="obj.expertAvatar"
            mode="aspectFill"
            class="header_img"
          />
          <view class="right_title">
            <view class="right_title_name">{{obj.expertName}}</view>
            <view class="right_title_font">入驻平台:{{obj.enterTime}}天</view>
          </view>
        </view>
        <view class="card" :style="{ backgroundImage: 'url(' + cardimg + ')' }">
          <view class="card_left">
            <view class="tixian">可提现余额(元)</view>
            <view class="money">{{obj.balance}}</view>
            <view class="tabi">
              他币:
              <image class="tabi_img" :src="tabimg" mode="aspectFill" />
			  {{obj.hisCoin}}
            </view>
          </view>
          <view class="card_right" @click="goToWithdraw">
            <view class="btn">去提现</view>
          </view>
        </view>
        <view class="group">
          <view class="group_top">
            <view class="group_top_left">
              <image
                class="group_top_left_img"
                :src="countdata[0].icon"
                mode="aspectFill"
              />
              <view class="group_top_left_content">
                <view class="title_size">{{ countdata[0].title }}</view>
                <view class="count_size">{{ obj.thisMonthConsultNum }}</view>
              </view>
            </view>
            <view class="group_top_right">
              <image
                class="group_top_left_img"
                :src="countdata[1].icon"
                mode="scaleToFill"
              />
              <view class="group_top_right_content">
                <view class="title_size">{{ countdata[1].title }}</view>
                <view class="count_size">{{obj.consultCount }}</view>
              </view>
            </view>
          </view>
          <view class="group_center"></view>
          <view class="group_top group_bottom">
            <view class="group_top_left">
              <image
                class="group_top_left_img"
                :src="countdata[2].icon"
                mode="aspectFill"
              />
              <view class="group_top_left_content">
                <view class="title_size">{{ countdata[2].title }}</view>
                <view class="count_size">{{ obj.thisMonthHisCoin }}</view>
              </view>
            </view>
            <view class="group_top_right">
              <image
                class="group_top_left_img"
                :src="countdata[3].icon"
                mode="aspectFill"
              />
              <view class="group_top_right_content bottom_right">
                <view class="title_size">{{ countdata[3].title }}</view>
                <view class="count_size"> {{obj.hisCoin}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom_content">
      <view class="iptWrap">
        <view class="label">每小时消耗他币</view>
        <input type="number" v-model="count">
        <view class="confirmBtn" @click="confirmFun">确定</view>
      </view>
      <view class="list">
        <view class="list_left">
          <view style="display: flex;align-items: center;">
            <image :src="jinengimg" mode="aspectFill" class="jinengimg" />
            <view class="jineng list_font">
              <view>擅长技能</view>
              <view class="list_font_box">
                <view class="jnbox" :style="{marginLeft:index != 0 ? '5rpx' : '' }" v-for="(item,index) in list" :key="index">{{item}}</view>
              </view>
          
            </view>
            
          </view>
          <view class="xz" @click="Skill">
            <view style="display: inline-block; padding-right: 20rpx">
                {{list.length == 0 ? '选择技能' : '更改技能'}}
            </view>
            <image class="jtimg" :src="jtimg" mode="aspectFill" />
          </view>
        </view>
        <view class="list_right">
          <view style="display: flex;align-items: center;">
            <image :src="timeimg" mode="aspectFill" class="zaixianimg" />
            <view class="zaixian list_font" > 
               <view>在线时间</view>
              <view class="times">{{obj.expertOnline == null ? '' : obj.expertOnline}}</view>
            </view>
            </view>
          <view class="xz" @click="timeChange">
            <view style="display: inline-block; padding-right: 20rpx"
              >设置在线时间
            </view>
            <image class="jtimg" :src="jtimg" mode="scaleToFill"
          /></view>
        </view>
      </view>
    </view>
    <!-- 技能普通弹窗 -->
    <uni-popup
      ref="popup"
      background-color="#fff"
      border-radius="10px"
    >
      <view
        class="popup-content"
        style="background-color: #fff; border-radius: 10px"
        :class="{ 'popup-height': type === 'left' || type === 'right' }"
      >
        <view class="card_jn">
          <view class="card_jn_title">
            <view></view>
            <view>请选择擅长技能{{ this.arr.length }}/3</view>
            <view @click="close()"
              ><image
                :src="guanbi"
                style="width: 48rpx; height: 48rpx"
                mode="scaleToFill"
            /></view>
          </view>
          <view class="card_jn_box">
            <view
              class="box"
              :style="{
                backgroundColor: item.iscolor == true ? '#FFF5ED' : '',
                border: item.iscolor == true ? '2px solid #FF7F22' : '',  
                width: item.iscolor == true ? '168rpx' : '176rpx', 
                height: item.iscolor == true ? '64rpx' : '72rpx',     
                lineHeight: item.iscolor == true ? '64rpx' : '72rpx',              
              }"
              v-for="(item, index) in skilldata"
              :key="item.id"
              @click="selectChange(item, index)"
              >{{ item.title }}</view
            >
          </view>
          <view class="footer_btn" @click="submit">确定</view>
        </view>
      </view>
    </uni-popup>
    <timeRange
       ref="time" 
        :startTime="startTime" 
        :startDefaultTime="startDefaultTime"
        :endTime="endTime"
        :endDefaultTime="endDefaultTime"
        @timeRange="timeRange"
    ></timeRange>

    
  </view>
</template>

<script>
import { imgBaseUrl } from "../../../utils/baseUrl";
import { queryExpertHomePage, dictItemList,editExpertHomePage } from "../../../utils/myapi";
import timeRange  from '../../../components/tpf-time-range/tpf-time-range'
export default {
  components:{timeRange},
  data() {
    return {
      count:'', //每小时他币个数
      cardimg: imgBaseUrl + "/img/allImgs/rzimg/rzbeijing.png",
      tabimg: imgBaseUrl + "/img/wshing/tab.png",
      guanbi: imgBaseUrl + "/img/allImgs/rzimg/guanbi.png",
      countdata: [
        {
          icon: imgBaseUrl + "/img/allImgs/rzimg/yuerenshu.png",
          title: "本月咨询人数",
          count: 500,
        },
        {
          icon: imgBaseUrl + "/img/allImgs/rzimg/zongrenshu.png",
          title: "总咨询人数",
          count: 5500,
        },
        {
          icon: imgBaseUrl + "/img/allImgs/rzimg/yuetabi.png",
          title: "本月他币数",
          count: 500,
        },
        {
          icon: imgBaseUrl + "/img/allImgs/rzimg/zongtabi.png",
          title: "总他币数",
          count: 5500,
        },
      ],
      skilldata: [],
      jinengimg: imgBaseUrl + "/img/allImgs/rzimg/jineng.png",
      timeimg: imgBaseUrl + "/img/allImgs/rzimg/shijian.png",
      jtimg: imgBaseUrl + "/img/allImgs/rzimg/right.png",
      arr: [],
	     obj:{},
       list:[],
       startTime:"00:00",
            startDefaultTime:"00:00",
            endTime:"24:00",
            endDefaultTime:"24:00",
    };
  },
  created() {
    this.getSkill();
    this.UserDetails();
   
  }, 
  methods: {
    async confirmFun(){
      console.log("===================>",this.count)
      if(this.count == ''){
        uni.showToast({
          title:'请输入消耗他币数',
          icon:'none'
        })
      }else{
        let userInfo = wx.getStorageSync('userInfo')
        const paramms = {
          expertId:userInfo.id,//专家id
          expertToll: this.count
        }
        const res = await editExpertHomePage(paramms)
        if(res.code == 200){
          uni.showToast({
            title:"设置成功"
          })
        }
      }
    },
	//获取技能
	async getSkill(){
    const paramms =  {
      pageNo:1,
      pageSize:100000000,
      dictId:'1750089799336751105'
    }
		const res = await dictItemList(paramms)
    console.log(res,'data');
     res.result.records.map((item)=>{
      this.skilldata.push({
        id:item.id,
        title:item.itemText,
        iscolor: false,
      })
     })
	},
    // 获取平台入驻信息
    async UserDetails() {
		let userInfo = wx.getStorageSync('userInfo')
      const data = await queryExpertHomePage(userInfo.id);
	  this.obj  = data.result
    this.list = data.result.expertExcel.split(',')
    console.log(this.list,'list');
    },
    // 去提现
    goToWithdraw(){
      uni.navigateTo({
        url:`../../../subPackagesA/pages/withdraw/withdraw?money=${this.obj.balance}`,
      })
    },
    //选择技能
    Skill() {
      this.$refs.popup.open("bottom");
    },
    //选择需要的技能
    selectChange(item, index) {
      this.skilldata[index].iscolor = !this.skilldata[index].iscolor;
      if (this.skilldata[index].iscolor == true) {
        this.arr.push({ id: item.id,itemvalue:item.title });
        if (this.arr.length > 3) {
          this.skilldata[index].iscolor = false;
          for (let i = 0; i < this.arr.length; i++) {
            if (this.arr[i].id == item.id) {
              this.arr.splice(i, 1);
            }
          }
        }
      } else {
        for (let i = 0; i < this.arr.length; i++) {
          if (this.arr[i].id == item.id) {
            this.arr.splice(i, 1);
          }
        }
      }
    },
    close() {
      this.skilldata = []
          this.arr = []
        this.getSkill()
      this.$refs.popup.close();
    },
    //提交事件
   async  submit() {
    let userInfo = wx.getStorageSync('userInfo')
    let experdata = []
    this.arr.map((item)=>{
      experdata.push(item.itemvalue)
    })
       const paramms = {
        expertExcel:experdata.join(','),
        expertId:userInfo.id,//专家id
       }
       if(experdata.length == 0)
       {
        uni.showToast({
							title: '请选择技能',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'error',
							//显示持续时间为 2秒
							duration: 1000
						})
       }else
       {
        const res = await editExpertHomePage(paramms)
       if(res.code == 200)
       {
          this.skilldata = []
          this.arr = []
        this.getSkill()
        this.UserDetails()
        uni.showToast({
								title: '编辑成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 1000
							})
              this.$refs.popup.close();
       }
       }
  
  
    },
      //选择时间
  timeChange(){
    this.$refs['time'].open();
  },
  async timeRange(e){
    let userInfo = wx.getStorageSync('userInfo')
    console.log(e,'startTime');
    let paramms = {
      expertId:userInfo.id,
      expertOnline:e[0] + '——' + e[1]
    }
    const res = await editExpertHomePage(paramms)
    if(res.code == 200)
    {
      uni.showToast({
        title: '编辑成功',
        //将值设置为 success 或者直接不用写icon这个参数
        icon: 'success',
        //显示持续时间为 2秒
        duration: 1000
      })
      this.UserDetails()
    }
  }
  },

};
</script>

<style lang="less" scoped>
.label{
  width: 236rpx;
  min-width: 236rpx;
}
.iptWrap{
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  input{
    width: 280rpx;
    border-bottom: 1px solid #e1e0e0;
  }
  .confirmBtn{
    width: 90rpx;
    min-width: 90rpx;
    text-align: center;
    background-color: #FF7F22;
    border-radius: 8rpx;
    color: #fff;
    height: 50rpx;
    line-height: 50rpx;
  }
}
.setbody {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f7;
  .content {
    background-color: #fff;
    .top_content {
      padding: 0rpx 30rpx;
      background-color: #fff;
      .header {
        display: flex;
        padding-top: 30rpx;
        .header_img {
          width: 112rpx;
          height: 112rpx;
          border-radius: 50%;
        }
        .right_title {
          padding-left: 20rpx;
          .right_title_name {
            font-size: 40rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            color: #222229;
            padding: 5rpx;
          }
          .right_title_font {
            font-size: 26rpx;
            font-family: PingFang SC, PingFang SC;
            // font-weight: bold;
            color: #666666;
            padding-top: 9rpx;
          }
        }
      }
      .card {
        margin-top: 30rpx;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 256rpx;
        filter: brightness(100%);
        display: flex;
        justify-content: space-between;
        .card_left {
          .tixian {
            font-size: 26rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.8);
            padding: 30rpx 0rpx 0rpx 38rpx;
          }
          .money {
            font-size: 60rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            color: #ffffff;
            padding: 16rpx 0rpx 0rpx 38rpx;
          }
          .tabi {
            font-size: 30rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            padding: 16rpx 0rpx 0rpx 38rpx;
            .tabi_img {
              width: 42rpx;
              height: 42rpx;
              vertical-align: middle;
              margin-top: 7rpx;
            }
          }
        }
        .card_right {
          padding-top: 55rpx;
          .btn {
            text-align: center;
            width: 224rpx;
            height: 84rpx;
            line-height: 84rpx;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 23px 0px 0px 23px;
            opacity: 1;
            font-size: 32rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: #ffffff;
          }
        }
      }
      .group {
        padding-top: 30rpx;
        .group_top_left_img {
          width: 45rpx;
          height: 45rpx;
        }
        .title_size {
          font-size: 26rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #999999;
        }
        .count_size {
          font-size: 30rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
        .bottom_right {
          padding-right: 28rpx;
        }
        .group_top {
          width: 575rpx;
          display: flex;
          justify-content: space-between;
          padding-bottom: 30rpx;
          .group_top_left {
            display: flex;
            align-items: center;
            padding-left: 20rpx;
            .group_top_left_content {
              padding-left: 30rpx;
            }
          }
          .group_top_right {
            display: flex;
            align-items: center;
            .group_top_right_content {
              padding-left: 30rpx;
            }
          }
        }
        .group_bottom {
          padding-top: 30rpx;
        }
        .group_center {
          width: 100%;
          height: 1px;
          background: #ebebeb;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
        }
        .group_bottom {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .bottom_content {
    margin-top: 20rpx;
    background-color: #fff;
    height: 51vh;
    .list {
      padding: 0rpx 30rpx;
      .list_font {
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight:800;
        color: #333333;
        padding-left: 20rpx;
        .times{
          font-size: 30rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #FF7F22;
          margin-top: 7rpx;
        }
        .list_font_box{
          display: flex;
          margin-top: 10rpx;
          .jnbox{
            font-size: 28rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #FF7F22;
            line-height: 16px;
            background: #FFF0E5;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            padding: 10rpx;
            width: 120rpx;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }
      }
      .xz {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #999999;
      }
      .jtimg {
        width: 20rpx;
        height: 28rpx;
        margin-bottom: 7rpx;
        vertical-align: middle;
      }
      .list_left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 40rpx 0rpx;
        .jinengimg {
          width: 100rpx;
          height: 100rpx;
          vertical-align: middle;
        }
        .jineng {
          display: inline-block;
        }
      }
      .list_right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .zaixianimg {
          width: 100rpx;
          height: 100rpx;
          vertical-align: middle;
        }
        .zaixian {
          display: inline-block;
        }
      }
    }
  }

  .card_jn {
    padding: 0rpx 30rpx;
    .card_jn_title {
      display: flex;
      justify-content: space-between;
      font-family: PingFang SC, PingFang SC;
      font-weight: 1000;
      color: #333333;
      padding: 30rpx 0rpx;
    }
    .card_jn_box {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding-bottom: 40rpx;
      .box {
        width: 176rpx;
        height: 72rpx;
        text-align: center;
        line-height: 72rpx;
        background: #f7f7f7;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        opacity: 1;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #666666;
        padding-left: 20rpx;
        padding-right: 20rpx;
        margin-top: 20rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .footer_btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      background: #ff7f22;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      opacity: 1;
      text-align: center;
      font-size: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      letter-spacing: 2rpx;
      color: #ffffff;
    }
  }
}
</style>
